<template>
  <div class="rd-editor-resize-block" :class="[position]" @mousedown="mouseDownHandle" ref="block"></div>
</template>

<script>
import { addEvent, removeEvent } from '@/util/event'
import { verticalOrHorizontal } from './constant'

export default {
  name: 'ResizeBlock',
  props: {
    // 需要展示的伸缩框
    position: {
      type: String,
      require: true
    },
    // 需要改变大小的目标dom
    target: {
      require: true
    },
    // 最小宽度
    minWidth: {
      type: Number,
      default: 0
    },
    // 最大宽度
    maxWidth: {
      type: Number,
      default: 0
    },
    // 最小高度
    minHeight: {
      type: Number,
      default: 0
    },
    // 最大高度
    maxHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 鼠标的位置
      mouseX: 0,
      mouseY: 0
    }
  },
  computed: {
    // 是否横向
    isHorizontal() {
      return verticalOrHorizontal(this.position) === 'horizontal'
    },
    // 是否纵向
    isVertical() {
      return verticalOrHorizontal(this.position) === 'vertical'
    }
  },
  methods: {
    mouseDownHandle(event) {
      // 用来判断是否移动了,区分点击和移动
      event.preventDefault()
      this.mouseX = event.clientX
      this.mouseY = event.clientY
      addEvent(document, 'mousemove', this.mouseMoveHandle, false)
      addEvent(document, 'mouseup', this.mouseUpHandle, false)
    },
    mouseMoveHandle(event) {
      // let blockRect = this.$refs.block.getBoundingClientRect()
      let containerRect = this.$parent.$refs.container.getBoundingClientRect()
      console.log(this.minWidth)
      // 横向
      if (this.isHorizontal) {
        let clientX = event.clientX < containerRect.left ? containerRect.left : event.clientX
        clientX = clientX > document.body.clientWidth ? document.body.clientWidth : clientX
        let offsetX = clientX - this.mouseX
        let result = this.target.getBoundingClientRect().width + offsetX
        if (this.minWidth > 0 && this.minWidth > result) {
          result = this.minWidth
        }
        if (this.maxWidth > 0 && this.maxWidth < result) {
          result = this.maxWidth
        }
        this.target.style.width = result + 'px'
        this.mouseX = containerRect.left + result
      }
      // 纵向
      if (this.isVertical) {
        let clientY = event.clientY < containerRect.top ? containerRect.top : event.clientY
        clientY = clientY > document.body.clientHeight ? document.body.clientHeight : clientY
        let offsetY = clientY - this.mouseY
        let result = this.target.getBoundingClientRect().height + offsetY
        if (this.minHeight > 0 && this.minHeight > result) {
          result = this.minHeight
        }
        if (this.maxHeight > 0 && this.maxHeight < result) {
          result = this.maxHeight
        }
        this.target.style.height = result + 'px'
        this.mouseY = containerRect.top + result
      }
    },
    mouseUpHandle() {
      removeEvent(document, 'mousemove', this.mouseMoveHandle)
      removeEvent(document, 'mouseup', this.mouseUpHandle)
    }
  }
}
</script>
